<template>
	<view class="home">
		<view class="head">
			<view class="h-1">长辈版</view>
			<view class="inp">
				<view class="l">
					<uni-icons type="search" size="18"></uni-icons>
					疫情防控服务
				</view>

				<uni-icons type="mic" size="20"></uni-icons>
			</view>
			<view class="h-2"><uni-icons type="chat" size="26" color="#fff"></uni-icons></view>
		</view>
		<view class="Swiper">
			<view class="s-one"><card :arr="arr1" textColor="#fff"></card></view>
			<swiper class="swiper" style="height: 500rpx; background-color: #fff;" circular="true" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s1.png"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s2.png"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s3.png"></image></view>
				</swiper-item>
			</swiper>
		</view>
		<swiper class="swiper" style="height: 400rpx; background-color: #fff;" circular="true" indicator-dots="true">
			<swiper-item><card :arr="arr2"></card></swiper-item>
			<swiper-item><card :arr="arr2"></card></swiper-item>
		</swiper>

		<view class="gonggao">
			<view class="g-1"><image src="/static/home/gg.png" mode=""></image></view>
			<view class="g-2">
				<swiper style="height: 100rpx;" vertical="true" circular="true" autoplay="true">
					<swiper-item v-for="item in gonggaolist" :key="item.id">{{ item.contents }}</swiper-item>
				</swiper>
			</view>
			<view class="you"><uni-icons type="forward" size="18"></uni-icons></view>
		</view>

		<view class="section2">
			<view class="one">
				<view class="o1"><view class="text">个人中心</view></view>
				<view class="o2">
					<scroll-view scroll-x="true" style="padding: 0 20rpx;white-space: nowrap;box-sizing: border-box;">
						<view class="box">
							<view class="scrollbox" style="background-color: #dbf8ed; ">
								<view class="b-t" style="color: #33b99f;">社区服务专区</view>
								<view class="b-t2" style="color: #7dd0b6;">行政许可 设立变更</view>
							</view>
						</view>
						<view class="box">
							<view class="scrollbox" style="background-color: #feebce;">
								<view class="b-t" style="color: #f39a1d;">亲情代办专区</view>
								<view class="b-t2" style="color: #f3b761;">帮助家人 待办事项</view>
							</view>
						</view>
						<view class="box">
							<view class="scrollbox" style="background-color: #fdded9;">
								<view class="b-t" style="color: #e98b60;">商鼎分</view>
								<view class="b-t2" style="color: #eaa381;">城市信用</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getgonggaoList } from '../../api/http.js';
export default {
	data() {
		return {
			arr1: [
				{
					txt: '扫一扫',
					img: '../../static/home/1/'
				},
				{
					txt: '电子证照',
					img: '../../static/home/1/'
				},
				{
					txt: '部门服务',
					img: '../../static/home/1/'
				},
				{
					txt: '区县服务',
					img: '../../static/home/1/'
				}
			],
			arr2: [
				{
					txt: '疫情防控服务',
					img: '../../static/home/'
				},
				{
					txt: '核酸检测一键通',
					img: '../../static/home/'
				},
				{
					txt: '郑好码',
					img: '../../static/home/'
				},
				{
					txt: '返整返豫人员登记',
					img: '../../static/home/'
				},
				{
					txt: '郑好融',
					img: '../../static/home/'
				},
				{
					txt: '郑好拍',
					img: '../../static/home/'
				},
				{
					txt: '社保',
					img: '../../static/home/'
				},
				{
					txt: '郑惠企·亲清在线',
					img: '../../static/home/'
				},
				{
					txt: '公积金',
					img: '../../static/home/'
				},
				{
					txt: '契税专区',
					img: '../../static/home/'
				}
			],
			gonggaolist: []
		};
	},
	created() {
		this.getGongList();
	},
	methods: {
		getGongList() {
			getgonggaoList().then(res => {
				this.gonggaolist = res.data.data;
			});
		}
	}
};
</script>

<style lang="less">
.section2 {
	margin-top: 20rpx;
	height: 280rpx;
	box-sizing: border-box;
	.one {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		background-color: #fff;
		.o1 {
			box-sizing: border-box;
			line-height: 100rpx;
			padding-left: 20rpx;
			.text {
				font-size: 35rpx;
				color: #000;
				font-weight: bold;
			}
		}
		.o2 {
			height: 100%;
			box-sizing: border-box;
			.box {
				display: inline-block;

				.scrollbox {
					margin-right: 20rpx;
					background-color: #9779ff;
					width: 290rpx;
					height: 140rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					box-sizing: border-box;
					padding: 0px 20rpx;
					color: #fff;
					.b-t {
						font-weight: bold;
					}
					.b-t2 {
						display: flex;
						align-items: center;
						font-size: 25rpx;
						margin-top: -20rpx;
					}
				}
			}
		}
	}
}
.home {
	background-color: #f6f6f6;
}
.head {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 750rpx;
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
	color: #fff;
	box-sizing: border-box;
	padding: 0px 30rpx;
	.h-1 {
		font-weight: bold;
	}
	.inp {
		width: 400rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 30rpx;
		color: gray;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 30rpx;
		.l {
			display: flex;
			align-items: center;
		}
	}
}
.Swiper {
	border-bottom-left-radius: 25%;
	border-bottom-right-radius: 25%;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	.s-one {
		position: absolute;
		top: 100rpx;
		left: 0px;
		z-index: 1;
	}
	.swiper-item {
		background-color: #fff;
		width: 750rpx;
		height: 100%;
	}
}
image {
	width: 100%;
	height: 100%;
}
.gonggao {
	background-color: #fff;
	width: 750rpx;
	height: 100rpx;
	border-top: #ccc solid 1px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 30rpx;
	position: relative;
	.g-1 {
		width: 100rpx;
		height: 70rpx;
	}
	.g-2 {
		width: 400rpx;
		height: 100rpx;

		swiper-item {
			width: 500rpx;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; // 默认不换行；
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	.you {
		position: absolute;
		top: 50%;
		right: 0px;
		transform: translateY(-50%);
		font-size: 40rpx;
	}
}
//设置轮播的指示点大小
.swiper {
	/deep/ .uni-swiper-dot {
		// 指示点元素默认样式
		width: 13rpx !important;
		height: 13rpx !important;
		background: #dddedd !important;
	}

	/deep/ .uni-swiper-dot-active {
		// 指示点元素激活（当前选中）状态样式
		width: 13rpx !important;
		height: 13rpx !important;
		background: #0094fd !important;
		border-radius: 4rpx;
	}
}
</style>
